<template>
  <view class="cu-header">
    <view class="cu-custom sticky bg-primary" :style="{ height: data.customBar }">
      <view
        class="cu-bar"
        :style="{ paddingTop: data.statusBar, height: data.customBar }"
        :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view class="action" @tap="BackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="content" :style="{ top: data.statusBar }">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup="props">
  import { useSysStore } from '@/state/modules/sys';
  const props = defineProps({
    title: String,
    bgImage: String,
    bgColor: String,
    BackPage: Function,
    isBack: Boolean,
  });
  const sysStore = useSysStore();
  const data = {
    customBar: sysStore.getCustomBar,
    statusBar: sysStore.getStatusBar,
  };
</script>

<style lang="scss" scoped></style>
